﻿#wrap {
    background: #F0F0F0;
    max-width: 640px;
    position: relative;
}
.area {
    width: 100%;
}
.mg-auto {
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.overflow {
    overflow: hidden;
}
.i-head {
    height: 5em;
    background: #8D50AD;
    border-top: 0.25em #8D50AD solid;
    border-radius: 0 0 0.1em 0.1em;
}
.border-bom {
    border-bottom: 2px #8D50AD solid;
    padding-top:10px;
}

.border-bom h1 {
    color:#fff;
    text-align:center;    
    font-size:28px;
}
.border-bom h1 span {
    background-color:#fff;
    color:#8D50AD;
    border-radius:5px;
    padding:2px;    
}

.banner {
    width:100%;
    /*height:308px;*/
}

.content {
    width:100%;
    height:auto;
    min-height:200px;
}
.content .title {
   width:100%;
   height:auto;
   line-height:30px;
   font: 400 2.4em/2.4em 'microsoft yahei';
   text-align:center;
   padding-top:20px;
   border-color:#fff;
   color:#555;
   border-bottom:1px solid #D9D9D9;
   padding-bottom:20px;
}

.content .Introduce {
    width:100%;
    height:auto;
    min-height:20px;
    padding:10px;
    font: 400 1.4em/1.4em 'microsoft yahei';
    color:#555;
    border-bottom:1px solid #D9D9D9;
}
.content .price {
    width:100%;
    height:70px;
    text-align:right;
    padding:10px;    
    border-bottom:1px solid #D9D9D9;
    
}
.content .price span {
    margin-right:30px;  
    color:#555; 
    font: 400 1.4em/1.4em 'microsoft yahei';
    display:block;
    
}
.content .price span em {
    color:#E85735;
    font: 400 2.4em/2.4em 'microsoft yahei';
}

.remark {
    margin-top:20px;
}
.remark ul {
     width:100%;
     display:block;   
     border-bottom:1px solid #D9D9D9;
}
.remark ul li {
    width:30%;
    display:inline-block;
     font: 400 1.6em/1.6em 'microsoft yahei';
    text-align:center;    
    margin-left:10px;
    cursor:pointer;
}
.remark ul li span {
    display:block;
    line-height:50px;
    width:40%;
    color:#555;
     width: 100%; 
}
.remark ul li:first-child span {
    display:block;
    line-height:50px;
    border-bottom:5px solid #8D50AD;
    color:#8D50AD;  
    
}



.remark .content {
    width:100%;
    height:auto;
    min-height:100px;
}
.remark .content .item {
    text-align:left;
    margin:10px;
    color:#555;
    border-bottom:1px solid #D9D9D9;
    /*font: 400 1.6em/1.6em 'microsoft yahei';*/
}

.remark .content .item .title {
    font: 400 1.6em/1.6em 'microsoft yahei';
    border-bottom:none;    
    display:block;
    border-bottom:1px solid #D9D9D9;
    text-align:left;
}
.remark .content .item .body .column {
   margin:10px;
   background-color:#D2A85C;
   color:#fff;     
   font: 200 1.6em/1.6em 'microsoft yahei';
   display:block;
   width:40%;
   padding-left:5px;
}

.remark .content .item .body .text
{
     margin:10px;
     font: 200 1.4em/1.4em 'microsoft yahei';
     color:#555;
}
.remark .content .item .body .img {
    margin-top:10px;    
}
.remark .content .item .body .img img{
   width:49%;
   display:inline-block;     
   margin:1px;
   
}


.bottom {
    margin-top:20px;
    margin-bottom: 120px;
}
.bottom span {
    display:block;
    font-size:18px;
    line-height:18px;
    text-align:center;  
    color:#515151; 
    margin-top:10px;
}
.bottom span:last-child {
    color:#AFAFAF;   
}

.footer_bar {
    top: inherit;
    bottom: 0;
}

.top_bar {
    max-width: 640px;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    margin: auto;
    height:100px;
}
.top_menu {
    display: -webkit-box;
    background:#fff;
    height:100px;
}
.top_menu li {
    width:50%;
    line-height:100px;
    text-align:center;
    font-size:30px;
    color:#515151;
    cursor: pointer;
}
.top_menu li:last-child {
   background-color:#E85735;
   color:#fff;     
}